這3個方法都會使用函式中this指向指定物件,差別在call,會直接執行,bind會傳回一個方法可重覆
因為this動向太難掌握 而延伸出固定指定this的方法: call , apply , bind,避免模糊
如果這3個方法參數為空、null和undefined,則默認傳入全局物件window。
var n = 123 ;
var obj = {
n : 456
};
function a () {
console.log (this.n);
}
a();
a.call (obj)
function.prototype.call(指定的物件);
call(要指定this的物件, arg1,arg2,arg3 , ... , ... , ...)
方法會將函數內部this指向指定物件,然後位於指定物件scope(作用區)執行使用call方法之物件,並只呼叫一次
var obj = {};
var f = function () {
return this ;
};
console.log (f () === window );
console.log ( f.call (obj) === obj);
apply(要指定this的物件,[arg1,arg2,agr3 .......])
--call 與 apply 最大差別在於apply 能接受傳入一組陣列的參數,
bind(要指定this的物件) ---bind方法用於將函數內部的 this 綁定到某個物件並且他也會綁定參數(記憶參數),然後返回一個新函數。-- 與call apply 比可重覆利用
var counter = {
count : 0 ,
inc : function () {
this . count ++ ;
}
};
var func = counter.inc;
func ();
console.log ( counter.count ); // 0
console.log ( count ); // NaN
上面代碼中,函數func是在全局環境中運行的,這時inc內部的this指向頂層對象window,所以counter.count 是不會變的,反而創建了一個全局變量count。因為window.count原來等於undefined,進行遞增運算後undefined++就等於NaN。
var counter = {
count : 0 ,
inc : function () {
this . count ++ ;
}
};
var func = counter.inc.bind (counter);
func ();
console.log ( counter.count ); // 1
上面代碼中,bind方法將inc方法綁定到counter以後,再運行func就會得到正確結果。
this綁定到其他對像也是可以的。
var counter = {
count : 0 ,
inc : function () {
this.count ++ ;
}
};
var obj = {
count : 100,
};
var func = counter.inc.bind ( obj );
func ();
console.log ( obj.count ); // 1